import React, { Fragment , useState , useEffect} from 'react'
import {Button, Table, Space ,Popconfirm} from 'antd'
import {useHistory} from 'react-router-dom'
import { getBanner ,deleteBanner,deleteAllBanner} from '../../api/banner'

function BannerList(props) {
  const [bannerlist,setbannerlist]=useState([])
  const [pageSize,setPageSize]=useState(6);
  const [total]=useState(0);
  const [current,setCurrent]=useState(1)
  const [selectedRowKeys,setSelectedRowKeys]=useState([])
  const [isSelectAll,setIsSelectAll]=useState(false)
  useEffect(()=>{
    getBanner().then((res)=>{
      setbannerlist(res.data.data)
    })
  },[])
  const history=useHistory()

  const deleteHandler=(record)=>(res)=>{
    var bannerid=record
   
    deleteBanner({bannerid}).then((res)=>{
      window.location.reload() 
      // console.log(isSelectAll)
    })
  }
  const cancel=()=>()=>{
    
  }
  
  // const hasSelected = selectedRowKeys.length > 0;



  const indexNum=(current-1)*pageSize
  const columns = [
    {
      title: '序号',
      align: 'center',
      // text表示当前字段的值
      // record 当前的完整的数据对象
      render: (text, record, index) => <span>{ indexNum+index+1}</span>
    },
    {
      title: '轮播图',
      align: 'center',
      dataIndex: 'bannerimg',
      key: 'bannerimg',
      render:(text,record,index)=>(
        
        <img src={ text} alt="" style={{ height: '80px'}}/>
      )
        
      
    },
    {
      title: '链接地址',
      align: 'center',
      dataIndex: 'link',
      key: 'link',
    },
    {
      title: '操作',
      align: 'center',

      render: (text, record, index) => {
        return (
          <Space>
            <span style={{ color: '#00A', cursor: 'pointer',marginright: '3px'}}>编辑</span>
            <span>|</span>
          <Popconfirm
            title="确定删除吗?"
            onConfirm={  deleteHandler(record.bannerid, index) }
            onCancel={ cancel }
            okText="确定"
            cancelText="取消"
          >
            
            <span style={{ color: '#f00', cursor: 'pointer'}}>删除</span>
          </Popconfirm>
        </Space>
        )
      }
    },
  ]
  const onSelectChange = (selectedRowKeys, selectedRow) => {
    
      
    
    setSelectedRowKeys( selectedRowKeys);
   
 
      setIsSelectAll(!isSelectAll)

      
    
    
    
    

  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
 
const deleteAllHandler=()=>{
  console.log(selectedRowKeys)
  deleteAllBanner({selectedRowKeys}).then((res)=>{
    setIsSelectAll(false)
    getBanner().then((res)=>{
      setbannerlist(res.data.data)
    })
  })

}
  return (
    <Fragment>
      <Button type="primary" style={{ marginBottom: '10px'}} onClick={()=>{
        history.push('/bannermanager/add');
      }}>
        添加轮播图
      </Button>
     {
       
        isSelectAll?
        <Button type="primary"  style={{ marginLeft: '10px'}} onClick={deleteAllHandler}>
          批量删除
        </Button>: null 
     }
      
    
      <Table 
      dataSource={bannerlist} 
      rowSelection={rowSelection}
      columns={columns} 
      
      rowKey={record => record.bannerid}
      pagination = { {
        position: ['bottomCenter'],
        current:current,
        pageSize:pageSize,
        showSizeChanger: true,
        pageSizeOptions: [5, 10, 15, 20, 50],
        showQuickJumper: true,
        
        showTotal: (total, range) => {
           
          return `共有${total} 条数据`
        },
        total: total,
        
        onChange: (page, pageSize) => {
          setCurrent(page)
        },
        onShowSizeChange: (current, size) => {
          setPageSize(size)
        }
      }}
     />
    </Fragment>
  )
}

export default BannerList
